<template>
  <div class="role">
    <el-card>
      <!-- 添加或编辑 -->
      <Forms ref="refForm" :dialog="dialog" :getRoleListData="getRoleListData" @refreshForm="refreshForm">
      </Forms>
      <!-- 展示角色列表 -->
      <Lists :roleListData="roleListData" @refreshForm="refreshForm" @editRole="editRole"></Lists>
    </el-card>
  </div>
</template>

<script>
import {mapGetters,mapActions} from 'vuex'
import Forms from "./Component/Forms.vue";
import Lists from "./Component/Lists.vue";
export default {
  components: { Forms, Lists },
  data() {
    return {
      //   对话框的展示与隐藏
      dialog: {
        isShowDialog: false,
      },
    };
  },
  computed:{
    // 导出角色列表数据
    ...mapGetters({roleListData:"Role/roleListData"})
  },
  methods: {
    // 获取角色列表数据
    ...mapActions({getRoleListData:"Role/getRoleListData"}),
    // 刷新列表数据
    refreshForm() {
      this.getRoleListData();
    },
    // 编辑角色
    editRole(id){
      this.$refs.refForm.getOneRoleData(id)
    }
  },
  mounted() {
    this.getRoleListData();
  },
};
</script>

<style scoped>
</style>